<template>
  <div class="toolbar">
    <div class="toolbar-item" @click="goHome">
      <image class="toolbar-item-img" resize="contain" src=""></image>
      <text class="toolbar-item-text">首页</text>
    </div>
    <div class="toolbar-item" @click="goCart">
      <image class="toolbar-item-img" resize="contain" src=""></image>
      <text class="toolbar-item-text">购物车</text>
    </div>
    <div class="toolbar-item" @click="goUser">
      <image class="toolbar-item-img" resize="contain" src=""></image>
      <text class="toolbar-item-text">我的</text>
    </div>
  </div>
</template>
<script>
import utils from '../utils/utils.js'
export default {
  name: 'Toolbar',
  components: {},
  data() {
    return {}
  },
  props: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // var url = '/yq/item/categories';
      // var params = {};
      // var success = res => {
      //   console.log(res);
      //   this.list = res.info;
      //   if (this.categoryId) {
      //     for (var i = 0; i < this.list.length; i ++) {
      //       if (this.list[i].id == this.categoryId) {
      //         this.currentIndex = i;
      //       }
      //     }
      //   }
      // }
      // var fail = res => {}
      // utils.request(url, params, success, fail);
    },
    goHome() {
      var event = weex.requireModule('event');
      var params = {
        path: 'index',
        data: ''
      }
      event.onPush(JSON.stringify(params));
    },
    goCart() {
      var event = weex.requireModule('event');
      var params = {
        path: 'cart',
        data: ''
      }
      event.onPush(JSON.stringify(params));
    },
    goUser() {
      var event = weex.requireModule('event');
      var params = {
        path: 'user',
        data: ''
      }
      event.onPush(JSON.stringify(params));
    }
  }
}
</script>
<style scoped>
.toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #aaa;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 110px;
}

.toolbar-item {
  flex-direction: column;
  align-items: center;
}

.toolbar-item-img {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

.toolbar-item-text {
  font-size: 20px;
}
</style>